<template>
  <div class="login">
    <block v-if="!islogin">
      <div class="login_contain">
        <van-cell-group>
          <div class="contain">
            <van-field
              v-model="usernumber"
              :value="usernumber"
              label="用户"
              placeholder="请输入用户名"
              required="true"
              :error-message="nummessage"
              @change="numchange"
            />
            <van-field
              v-model="password"
              :value="password"
              label="密码"
              password
              required="true"
              placeholder="请输入密码"
              @change="passchange"
            />
            <van-button type="warning" @click="handleput">登录</van-button>
          </div>
        </van-cell-group>
      </div>
    </block>
    <block v-if="islogin">
      <div class="contain">
        <img class="img" src="../../../static/images/user.png" alt />
        <div class="contain_detail">
          <div class="cont">名字：{{numStro}}</div>
          <div class="cont">工号：{{enoStro}}</div>
          <div class="cont">职位：{{rolesStro}}</div>
          <van-button type="warning" @click="logout">退出登陆</van-button>
        </div>
      </div>
    </block>
  </div>
</template>

<script>
export default {
  data() {
    return {
      islogin: false,
      // 缓存里的信息
      enoStro:'',
      numStro:'',
      rolesStro:'',
      nummessage: "",
      usernumber: "",
      password: "",
      eno: "",
      roles: ""
    };
  },
  methods: {
    async handleput() {
      // console.log(res);
      // 登陆前判断是否为空
      if (this.usernumber == 0 || this.password == 0) {
        wx.showToast({
          title: "不能为空",
          icon: "none",
          duration: 1500
        });
        return;
      }
      const username = this.usernumber;
      const password = this.password;
      console.log(password);
      console.log(username);

      // 发送登陆请求

      const res = await this.$http.post({
        url: "login_url",
        data: {
          username: username,
          password: password
        }
      });
      console.log(res);
      if (res.code !== 200) {
        wx.showToast({
          title: "密码错误，请重新尝试",
          icon: "none",
          duration: 1500
        });
        return;
      }
      this.getuserinfo(username);
      wx.showToast({
        title: "登录成功",
        icon: "none",
        image: "",
        duration: 1500
      });
      this.islogin = true;
      wx.setStorageSync("token", res.data.token);
      
    },
    // 获取用户权限
    async getuserinfo(name) {
      const result = await this.$http.get({
        url: "query_role/query_by_name/"+name
      });
      console.log(result)
      this.roles = result.data.employee.roles
      this.eno = result.data.employee.eno
      this.enoStro = this.eno
      this.rolesStro = this.roles
      this.numStro = this.usernumber
      wx.setStorageSync("eno", this.eno);
      wx.setStorageSync("roles", this.roles);
      wx.setStorageSync("num", this.usernumber);
      console.log(this.roles);
      console.log(this.eno);
    },

    // //验证工号
    // checknum(val) {
    //   if (this.usernumber == "") {
    //     this.nummessage = "不能为空";
    //   }
    // },
    // 提出登陆
    logout() {
      wx.clearStorageSync();
      this.islogin = false;
    },
    // 用户输入事
    async numchange(val) {
      console.log(val);

      this.usernumber = val.mp.detail;
      this.nummessage = "";
    },
    // 密码输入时发生的事
    async passchange(val) {
      console.log(val);
      this.password = val.mp.detail;
      this.passmessage = "";
    }
  },
  beforeMount() {
    let islogin = wx.getStorageSync("token");
    if(islogin!==''){
      this.islogin = true
      this.enoStro = wx.getStorageSync("eno");
      this.numStro = wx.getStorageSync("num");
      this.rolesStro = wx.getStorageSync("roles");
    }
  },
};
</script>

<style scope>
page {
  height: 100%;
  background: #f3f3f3;
}
.login_contain {
  width: 100%;
  display: flex;
  height: 800rpx;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.contain {
  width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* .van-button {
  width: 400rpx !important;
  margin-top: 20rpx !important;
} */
.contain {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cont {
  background: #fff;
  margin-top: 20rpx;
  height: 70rpx;
  line-height: 70rpx;
}
.van-button {
  margin-top: 50rpx !important;
  height: 100rpx !important;
  line-height: 100rpx !important;
}
.login{
  height:100%
}
.img {
  width: 260rpx;
  height: 260rpx;
}
</style>